import React from "react"
import useMount from "../../hooks/useMount.ts"
import useUnmount from "../../hooks/useUnmount.ts"
import useUnmountedRef from "../../hooks/useUnmountedRef.ts"
import { useState } from "react"

const Child = () => {
  const unmountedRef = useUnmountedRef()
  useMount(() => {
    console.log("初始化了", unmountedRef)
  })
  useUnmount(() => {
    console.log("卸载了", unmountedRef)
  })

  return <div>我是子组件</div>
}

const TryUseUnmountRef = () => {
  const [flag, setFlag] = useState(true)

  return (
    <>
      <button className='text-[50px]' onClick={() => setFlag(!flag)}>
        点击切换,当前flag： {flag.toString()}
      </button>
      {flag && <Child />}
    </>
  )
}

export default TryUseUnmountRef
